<template>
  <div>
    <button @click="showJson"> toJson </button>
    <div id="luckysheet" style="margin: 0px; height: 100vh;" />
  </div>
</template>

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  var options = {
    container: "luckysheet", //luckysheet为容器id
    showinfobar: false,
  };
  // eslint-disable-next-line
  luckysheet.create(options);
});

function showJson() {
  // eslint-disable-next-line
  let eleLink = document.createElement('a');
  eleLink.download = "download.json";
  eleLink.style.display = 'none';
  // eslint-disable-next-line
  let blob = new Blob([JSON.stringify(luckysheet.toJson())]);
  eleLink.href = URL.createObjectURL(blob);
  // 触发点击
  document.body.appendChild(eleLink);
  eleLink.click();
  // 然后移除
  document.body.removeChild(eleLink);
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
